<template>
  <div class="project-overview">
    <h1>项目申报系统概览</h1>

    <!-- 项目统计信息 -->
    <div class="statistics">
      <div class="stat-card">
        <h3>总申报项目数</h3>
        <p>{{ totalProjects }}</p>
      </div>
      <div class="stat-card">
        <h3>待审核项目数</h3>
        <p>{{ pendingProjects }}</p>
      </div>
      <div class="stat-card">
        <h3>已通过项目数</h3>
        <p>{{ approvedProjects }}</p>
      </div>
    </div>

    <!-- 最近申报项目列表 -->
    <div class="recent-projects">
      <h2>最近申报项目</h2>
      <table>
        <thead>
        <tr>
          <th>项目名称</th>
          <th>申报人</th>
          <th>申报时间</th>
          <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="project in recentProjects" :key="project.id">
          <td>{{ project.name }}</td>
          <td>{{ project.applicant }}</td>
          <td>{{ project.applicationDate }}</td>
          <td>{{ project.status }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProjectOverview',
  data() {
    return {
      totalProjects: 100, // 总申报项目数
      pendingProjects: 20, // 待审核项目数
      approvedProjects: 70, // 已通过项目数
      recentProjects: [
        {
          id: 1,
          name: '项目 A',
          applicant: '张三',
          applicationDate: '2025-06-10',
          status: '待审核'
        },
        {
          id: 2,
          name: '项目 B',
          applicant: '李四',
          applicationDate: '2025-06-09',
          status: '已通过'
        },
        {
          id: 3,
          name: '项目 C',
          applicant: '王五',
          applicationDate: '2025-06-08',
          status: '已拒绝'
        }
      ]
    };
  }
};
</script>

<style scoped>
.project-overview {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.statistics {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
}

.recent-projects {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}
</style>